<template>
  <div>
    <el-dialog
        :visible.sync="detailDialog"
        title="报销明细"
        width="80%"
        center
        top="50px"
    >
      <el-descriptions :column="3" border size="small" direction="horizontal">
        <el-descriptions-item label="店铺名称">{{
            detailData.storeName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="一级分类">{{
            detailData.financeName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="二级分类">{{
            detailData.levelName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓库">{{
            detailData.areaName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="品牌">{{
            detailData.systemName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="责任主体" v-if="detailData.optionerName">{{
            detailData.optionerName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="去货架日期">{{
            detailData.storeCreateTime
          }}
        </el-descriptions-item>
        <el-descriptions-item label="报销原因类型">
          {{ detailData.reimburseTypeName || '' }}
        </el-descriptions-item
        >
        <el-descriptions-item label="报销原因说明">
          <el-tooltip
              class="item"
              effect="dark"
              :content="detailData.reimburseRemark"
              placement="bottom"
          >
            <div class="reimburseRemarksty">
              {{ detailData.reimburseRemark || '' }}
            </div>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="报销金额"
        ><span style="color: red">{{ detailData.money || 0 }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建人"
        ><span>{{
            detailData.creator || ''
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="接收回款方式">
          {{
            detailData.paymentMethod
                ? paymentMethodData[detailData.paymentMethod - 1]?.name
                : ''
          }}
        </el-descriptions-item>
        <el-descriptions-item label="报销状态">
          {{
            detailData.status !== null
                ? baoXiaoStatus[detailData.status]?.name
                : ''
          }}
        </el-descriptions-item>
        <el-descriptions-item
            label="收款码"
            v-if="detailData.paymentMethod != 1&&detailData.payUrl"
        >
          <el-image
              style="width: 50px; height: 50px"
              :src="'https://' + detailData.payUrl"
              :preview-src-list="['https://' + detailData.payUrl]"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item
            label="卡号信息"
            v-if="detailData.paymentMethod == 1"
        >
          <p>卡号: {{ detailData.cardNo || '' }}</p>
          <p>户名: {{ detailData.cardName || '' }}</p>
          <p>开户行: {{ detailData.bankName || '' }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detailData.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="驳回原因" v-if="detailData.rejectReason">{{
            detailData.rejectReason || ''
          }}
        </el-descriptions-item>
        <el-descriptions-item label="凭证" :span="2">
          <div class="pzclass" style="display: flex">
            <div v-for="(item, index) in detailData.proof" :key="index">
              <el-image
                  style="
                  width: 50px;
                  height: 50px;
                  margin-right: 2px;
                  border: 1px solid #cdc9c9;
                "
                  :src="'https://' + item"
                  :key="index"
                  :preview-src-list="detailData.proof.map((a) => 'https://' + a)"
              ></el-image>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="审核信息" :span="2">
          <div class="pzclass" style="display: flex">
            {{ `${detailData.operator || ""}-${detailData.updateTime || ""}` }}
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="报销文件" :span="2">
          <a :href="`https://${detailData.reimburseExcelUrl}`">{{
              detailData.reimburseExcelUrl
            }}</a>
        </el-descriptions-item>
        <el-descriptions-item
            v-if="detailData.status === 4"
            label="财务打款凭证"

            :span="2"
        >
          <template v-if="detailData.paidUrl && detailData.paidUrl.length"></template>
          <el-image
              v-for="(item,index) in detailData.paidUrl"
              :key="index"
              style="width: 50px; height: 50px"
              :src="'https://' + item"
              :preview-src-list="detailData.paidUrl.map((a) => 'https://' + a)"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item
            v-if="detailData.status === 4"
            label="财务打款方式"
            :span="2"
        >
          {{ detailData.paymentMethodName }}
        </el-descriptions-item>
        <el-descriptions-item label="重复报销ID" :span="2" v-if="detailData.repeatReimburseId">
          <div class="pzclass" style="display: flex">
            <el-link @click="checkRepeat(a)" v-for="a in detailData.repeatReimburseId" style="text-decoration: underline;margin-right: 12px;color: #ff4949;
"> {{ a }}
            </el-link>
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="type === 3">
        <p style="margin-top: 15px;color: #1370fb;margin-bottom: 10px">财务打款信息：</p>
        <span>付款方式：<el-select v-model="dkObj.paymentMethodId" style="width: 300px" size="small">
           <el-option
               v-for="(item, index) in payTypeList"
               :key="index"
               :label="item.name"
               :value="item.id"
           ></el-option>
        </el-select></span>
        <p style="margin-top: 10px">
          <span style="width: 99px">付款凭证：</span>
        </p>
        <div style="display: flex">
          <el-upload
              class="upload-demo"
              drag
              ref="uploadRef"
              :headers="headers"
              :action="`${$apiHost}/common/fileImgUrl`"
              :on-success="onSuccess"
              :show-file-list="false"
              multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <div v-if="qrCode" class="qrCode" style="display: flex;flex-direction: column;align-items: center">
            <el-image :src="qrCode" style="width: 150px;"></el-image>
            <el-button size="small" type="primary" style="margin-top: 10px" @click="recipePhonePic">接收手机端图片</el-button>
          </div>
        </div>

        <div class="div" style="display: flex; align-items: center">
          <div
              v-for="(v, i) in dkObj.paidUrl"
              style="display: flex; align-items: center; margin-right: 10px"
          >
            <el-image
                :key="i"
                style="width: 50px; height: 50px"
                ref="preview"
                :src="host + v"
                :preview-src-list="[host + v]"
            >
            </el-image>
            <div @click="deletePic(i)">
              <el-icon name="delete"></el-icon>
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" v-if="type === 2">
        <el-button type="danger" @click="_submit(3)">驳 回</el-button>
        <el-button type="success" @click="_submit(2)">通 过</el-button>
      </span>
      <span slot="footer" v-if="type === 3">
        <el-button type="danger" @click="_submit(3)">驳 回</el-button>
        <el-button type="success" @click="transferFunds">通过并打款 ¥{{ detailData.money }}</el-button>
      </span>


      <el-dialog
          :visible.sync="rejectDialogSon"
          title="审核"
          center
          width="30%"
          append-to-body
      >
        <p style="margin-bottom: 20px">
          <span>驳回原因：</span>
          <el-input
              v-model="rejectReasonDoaild"
              type="textarea"
              placeholder="请填写原因"
              size="small"
          ></el-input>
        </p>
        <span slot="footer">
          <el-button
              size="small"
              @click="rejectDialogSon = false"
              style="margin-top: 10px; margin-left: 10px"
          >取消</el-button
          >
          <el-button
              type="danger"
              size="small"
              @click="directorAuditRejectDialogSon()"
          >确认
          </el-button>
        </span>
      </el-dialog>
    </el-dialog>
    <repeat-detail ref="repeatRef"></repeat-detail>
  </div>
</template>

<script>
import repeatDetail from "./repeatDetail.vue";
import quinn from "../../../utils/quinn";

export default {
  name: 'reimbursementDetail',
  components: {
    repeatDetail
  },
  data() {
    return {
      rejectDialogSon: false,
      detailDialog: false,
      detailData: {},
      aduitData: {},
      payTypeList: [],
      dkObj: {
        paidUrl: [],
      },
      qrCode: "",
      userId: "",
      host: this.$imgHost,
      type: '', //1详情  2审核  3审核打款
      commissionTypeId: '',
      paymentMethodData: [
        {value: 1, name: '银行卡'},
        {value: 2, name: '微信'},
        {value: 3, name: '支付宝'},
      ],
      baoXiaoStatus: [
        {value: 0, name: '财务待审核'},
        {value: 1, name: '财务待打款'},
        {value: 2, name: '已取消'},
        {value: 3, name: '审核不通过'},
        {value: 4, name: '已打款'},
        {value: 5, name: '待主管审核'},
      ],
      rejectReasonDoaild: '',
    }
  },
  computed: {
    headers() {
      const token = this.token || this.$quinn.getStorage('token')
      return {
        token,
      }
    },
  },
  created() {
    const {userName = [], id = []} = quinn.getStorage('userData') || {}
    this.userName = userName
    this.userId = id
  },
  methods: {
    getStatus(val) {
      switch (val) {
        case 0:
          return '待分配'
          break
        case 1:
          return '待审核'
          break
        case 2:
          return '审核通过'
          break
        case 3:
          return '已驳回'
          break
        case 4:
          return '已取消'
          break
      }
    },
    onSuccess(res) {
      if (res.code === 200 && res.result) {
        this.dkObj.paidUrl.push(res.result[0])
      }
    },
    transferFunds() {
      if (!this.dkObj.paidUrl) {
        return this.$message.warning('请上传打款凭证！')
      }
      const data = {
        paidUrl: this.dkObj.paidUrl.join(','),
        ids: [this.aduitData.id],
        status: 4,
        paymentMethodId: this.dkObj.paymentMethodId
      }
      this.$api
          .financeUpdateFinanceDataReimburseStatus(data)
          .then((res) => {
            if (res == 1) {
              this.$message({message: '操作成功!', type: 'success'})
              this.detailDialog = false
              this.$emit('addStatus', 1)
            }
          })
    },
    async getPayType() {
      const res = await this.$api.orderGetPaymentMethod()
      if (res && res.length) {
        this.payTypeList = []
        this.payTypeList = res
      }
    },
    recipePhonePic() {
      this.$api.accountGetUserUploadImgUrl().then(res => {
        if (res) {
          console.log(res.split(','))
          this.dkObj.paidUrl.push(...res.split(','))
        } else {
          this.$message.warning('暂无图片！')
        }
      })
    },
    deletePic(i) {
      this.dkObj.paidUrl.splice(i, 1)
    },
    directorAuditRejectDialogSon() {
      if (!this.rejectReasonDoaild) {
        return this.$message.warning('请输入原因!')
      }
      const data = {
        status: 3,
        rejectReason: this.rejectReasonDoaild,
        ids: [this.detailData.id],
      }
      this.$api.financeUpdateFinanceDataReimburseStatus(data).then((res) => {
        console.log('审核', res)

        if (res == 1) {
          this.$message({message: '操作成功!', type: 'success'})
          this.rejectDialogSon = false
          this.detailDialog = false
          this.$emit('addStatus', 1)
        }
      })
    },
    getDataList() {
      this.$api
          .financeGetFinanceDataReimburseDetailById({id: this.aduitData.id})
          .then((res) => {
            console.log('报销详情', res)
            if (res) {
              if (res.paidUrl && res.paidUrl != null) {
                res.paidUrl = res.paidUrl.split(',')
              }
              this.detailData = res
              this.detailDialog = true
            } else {
              this.$message.warning('暂无数据')
            }
          })
    },
    checkRepeat(a) {
      this.$api
          .financeGetFinanceDataReimburseDetailById({id: a})
          .then((res) => {
            if (res) {
              if (res.paidUrl && res.paidUrl != null) {
                res.paidUrl = res.paidUrl.split(',')
              }
              this.$refs.repeatRef.handleOpen(res)
            } else {
              this.$message.warning('暂无数据')
            }
          })
    },
    handleOpen(val, type) {
      this.type = type
      this.aduitData = val
      this.rejectReasonDoaild = ''
      this.commissionTypeId = val.commissionTypeId
      this.getDataList()
      if (type == 3) {
        this.$api.wxUserUploadImg({userId: this.userId}).then(res => {
          this.qrCode = 'data:image/png;base64,' + res
        })
        this.getPayType()
      }
    },
    async _submit(val) {
      if (val === 2 && this.detailData.status == 0) {
        //通过
        const data = {
          status: 1,
          rejectReason: '',
          ids: [this.detailData.id],
        }
        this.$api.financeUpdateFinanceDataReimburseStatus(data).then((res) => {
          if (res == 1) {
            this.$message({message: '操作成功!', type: 'success'})
            this.detailDialog = false
            this.$emit('addStatus', 1)
          }
        })
      } else if (val === 2 && this.detailData.status == 5) {
        const data = {
          status: 0,
          rejectReason: '',
          ids: [this.detailData.id],
        }
        this.$api.financeUpdateFinanceDataReimburseStatus(data).then((res) => {
          if (res == 1) {
            this.$message({message: '操作成功!', type: 'success'})
            this.detailDialog = false
            this.$emit('addStatus', 1)
          }
        })
      } else {
        this.rejectReasonDoaild = ''
        this.rejectDialogSon = true
      }
    },
  },
}
</script>

<style scoped>
/deep/ .cell {
  text-align: center;
}

.reimburseRemarksty {
  max-width: 600px;
  min-width: 300px;
  white-space: pre-wrap;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
}

.pzclass {
  max-width: 800px;
  flex-wrap: wrap;
}
</style>
